import React from 'react'
import styles from './index.less'
import { Row, Col } from 'antd'
import ProForm from '@ant-design/pro-form';
import FormItem from '../FormItem';
import { handleTime, ruleType } from '../Exercises';
interface Params {
  area?: any[]
}
export default function ChessRecruit(props: Params) {
  const { area } = props;
  const content = area?.map((item) => {
    const { id, ruleType: rule, value, compareType } = item?.warningRole ?? {}
    const { id: iId } = item
    const i = 0
    const { id: comId, ruleType: comRule, timeLimit: comtimeLimit, timeUnit: comtimeUnit, value: comValue, compareType: compareType1 } = item?.completeRole ?? {}
    return {
      i: id, name: `${ruleType(rule) || ''}${compareType ? compareType == 1 ? '高于' : '低于' : ''}`, value: value,
      ii: comId, val: comtimeLimit || 7,
      iii: `${comId}${i + 1}`, nextName: `${handleTime(comtimeUnit) || ''}${ruleType(comRule) || ''}${compareType1 ? compareType1 == 1 ? '高于' : '低于' : ""}`, value1: comValue || '50',
      isEnable: `${item?.isEnable}`, iId
    }

  })
  // const content = [
  //   { i: 'key5', name: '棋灵闯关完成度低于', value: "10", ii: 'key55', nextName: '棋灵闯关完成度高于', value1: '50' },
  //   { i: 'key6', name: '直播/棋灵闯关完成度高于', value: "10", ii: '', nextName: '' },
  // ]
  return (
    <div className={styles.chess_recruit} >
      <div style={{ marginBottom: '10px' }}>棋灵闯关环节</div>
      <div style={{ overflow: 'auto' }}>
        <Row style={{ textAlign: 'center', flexWrap: 'nowrap' }}>
          <Col className={styles.border_style} span={10}>预警规则</Col>
          <Col className={styles.border_style} span={10}>完成规则</Col>
          <Col className={styles.border_style} span={4}>启用状态</Col>
        </Row>
        <ProForm.Item
        >
          {
            content?.map((item: any, index: any) => {
              return <FormItem iId={item?.iId} key={index} index={item?.i} val={item?.val} name={item?.name} index1={item?.ii} index2={item?.iii} nextname={item?.nextName} value={item?.value} value1={item?.value1} isEnable={item?.isEnable} />
            })
          }
        </ProForm.Item>
      </div>
    </div>
  )
}
